<!--<template>-->
<!--  <div :class="className" :style="{height:height,width:width}" />-->
<!--</template>-->

<!--<script>-->
<!--import echarts from 'echarts'-->
<!--require('echarts/theme/macarons') // echarts theme-->
<!--import resize from './mixins/resize'-->

<!--const animationDuration = 3000-->

<!--export default {-->
<!--  mixins: [resize],-->
<!--  props: {-->
<!--    className: {-->
<!--      type: String,-->
<!--      default: 'chart'-->
<!--    },-->
<!--    width: {-->
<!--      type: String,-->
<!--      default: '100%'-->
<!--    },-->
<!--    height: {-->
<!--      type: String,-->
<!--      default: '300px'-->
<!--    }-->
<!--  },-->
<!--  data() {-->
<!--    return {-->
<!--      chart: null-->
<!--    }-->
<!--  },-->
<!--  mounted() {-->
<!--    this.$nextTick(() => {-->
<!--      this.initChart()-->
<!--    })-->
<!--  },-->
<!--  beforeDestroy() {-->
<!--    if (!this.chart) {-->
<!--      return-->
<!--    }-->
<!--    this.chart.dispose()-->
<!--    this.chart = null-->
<!--  },-->
<!--  methods: {-->
<!--    initChart() {-->
<!--      this.chart = echarts.init(this.$el, 'macarons')-->

<!--      this.chart.setOption({-->
<!--        tooltip: {-->
<!--          trigger: 'axis',-->
<!--          axisPointer: { // 坐标轴指示器，坐标轴触发有效-->
<!--            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'-->
<!--          }-->
<!--        },-->
<!--        radar: {-->
<!--          radius: '66%',-->
<!--          center: ['50%', '42%'],-->
<!--          splitNumber: 8,-->
<!--          splitArea: {-->
<!--            areaStyle: {-->
<!--              color: 'rgba(127,95,132,.3)',-->
<!--              opacity: 1,-->
<!--              shadowBlur: 45,-->
<!--              shadowColor: 'rgba(0,0,0,.5)',-->
<!--              shadowOffsetX: 0,-->
<!--              shadowOffsetY: 15-->
<!--            }-->
<!--          },-->
<!--          indicator: [-->
<!--            { name: 'Sales', max: 10000 },-->
<!--            { name: 'Administration', max: 20000 },-->
<!--            { name: 'Information Technology', max: 20000 },-->
<!--            { name: 'Customer Support', max: 20000 },-->
<!--            { name: 'Development', max: 20000 },-->
<!--            { name: 'Marketing', max: 20000 }-->
<!--          ]-->
<!--        },-->
<!--        legend: {-->
<!--          left: 'center',-->
<!--          bottom: '10',-->
<!--          data: ['Allocated Budget', 'Expected Spending', 'Actual Spending']-->
<!--        },-->
<!--        series: [{-->
<!--          type: 'radar',-->
<!--          symbolSize: 0,-->
<!--          areaStyle: {-->
<!--            normal: {-->
<!--              shadowBlur: 13,-->
<!--              shadowColor: 'rgba(0,0,0,.2)',-->
<!--              shadowOffsetX: 0,-->
<!--              shadowOffsetY: 10,-->
<!--              opacity: 1-->
<!--            }-->
<!--          },-->
<!--          data: [-->
<!--            {-->
<!--              value: [5000, 7000, 12000, 11000, 15000, 14000],-->
<!--              name: 'Allocated Budget'-->
<!--            },-->
<!--            {-->
<!--              value: [4000, 9000, 15000, 15000, 13000, 11000],-->
<!--              name: 'Expected Spending'-->
<!--            },-->
<!--            {-->
<!--              value: [5500, 11000, 12000, 15000, 12000, 12000],-->
<!--              name: 'Actual Spending'-->
<!--            }-->
<!--          ],-->
<!--          animationDuration: animationDuration-->
<!--        }]-->
<!--      })-->
<!--    }-->
<!--  }-->
<!--}-->
<!--</script>-->
